<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .box {
            margin: 50px auto;
            width: 400px;
            min-height: 400px;
            box-shadow: 1px 1px 5px #888;
            padding: 20px;
        }

        .inp {
            width: 100%;
            line-height: 50px;
            outline: none;
            font-size: 20px;
            padding-left: 10px;
        }

        .itme {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 50px;
            border-bottom: 1px solid;
        }

        .itme button {
            border: none;
            padding: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input onkeypress="add();" class="inp" type="text">
        <ul onclick="aaa();" class="list">
            <li class="itme">
                <span>1. xxx</span>
                <button>x</button>
            </li>
        </ul>
    </div>
    <script>
        var cc=1;
        function add(){
            var key=event.key;
                if (key === 'Enter') {
                    var $inp = document.querySelector('.inp');
                    var test = $inp.value

                    var $li = document.createElement('li')
                    $li.innerHTML = `<li class="itme">
                                <span>${cc++}. ${test}</span>
                                <button>x</button>
                            </li>`
                    var $list=document.querySelector('.list')
                    $list.appendChild($li)

                    $inp.value='';        
            }
        }
        function aaa(){
            var tt=event.target;
            if(tt.nodeName==='BUTTON'){
                var li=tt.parentNode;
                li.remove();
            }
        }
































        // var count=1;
        // function add(){
        //     var key=event.key;
        //     if(key==='Enter'){
        //         var $inp = document.querySelector('.inp');
        //         var text = $inp.value

        //         var $li = document.createElement('li')
        //         $li.innerHTML = `<li class="itme">
        //                     <span>${count++}. ${text}</span>
        //                     <button>x</button>
        //                    </li>`
        //         var $list = document.querySelector('.list')
        //         $list.appendChild($li);
        //         $inp.value = ''; 
        //     }               
        // }
        // function aaa(){
        //     var sss=event.target;
        //     if(sss.nodeName==='BUTTON'){
        //         var $li=sss.parentNode;
        //         $li.remove()
        //     }
        // }
    </script>
</body>

</html>